<template>
  <div class="p-2">
    <transition :enter-active-class="proxy?.animate.searchAnimate.enter" :leave-active-class="proxy?.animate.searchAnimate.leave">
      <div class="search" v-show="showSearch">
        <el-form :model="queryParams" ref="queryFormRef" :inline="true" label-width="68px">
          <el-form-item label="归属商家" prop="merchantName">
            <el-input v-model="queryParams.merchantName" placeholder="请输入商家名称" clearable style="width: 240px" @keyup.enter="handleQuery" />
          </el-form-item>
          <el-form-item label="店铺名称" prop="shopName">
            <el-input v-model="queryParams.shopName" placeholder="请输入店铺名称" clearable style="width: 240px" @keyup.enter="handleQuery" />
          </el-form-item>
          <el-form-item label="交易日期" style="width: 308px">
            <el-date-picker
              v-model="dateRange"
              value-format="YYYY-MM-DD"
              type="daterange"
              range-separator="-"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              :default-time="[new Date(2000, 1, 1, 0, 0, 0), new Date(2000, 1, 1, 23, 59, 59)]"
            ></el-date-picker>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
            <el-button icon="Refresh" @click="resetQuery">重置</el-button>
          </el-form-item>
        </el-form>
      </div>
    </transition>
    <el-card shadow="never">
      <template #header>
        <el-row :gutter="10" class="mb8">
          <right-toolbar v-model:showSearch="showSearch" @queryTable="getList"></right-toolbar>
        </el-row>
      </template>
      <el-table v-loading="loading" :data="dataList" class="tableEmpty">
        <el-table-column label="店鋪ID" align="center" prop="shop" />
        <el-table-column label="归属商家" align="center" prop="merName" />
        <el-table-column label="店鋪名称" align="center" prop="shopName" />
        <el-table-column label="交易日期" align="center" prop="date" width="200px"/>
        <el-table-column label="成功交易金额" align="center" prop="orderAmount">
          <template #default="scope">
            <span>{{ scope.row.orderAmount/100 }} </span>
          </template>
        </el-table-column>
        <el-table-column label="收益金额" align="center" prop="shopProfit">
          <template #default="scope">
            <span>{{ scope.row.shopProfit/100 }} </span>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
  </div>
</template>

<script setup name="ShopMonthlyStat" lang="ts">
import { statShopMonthlyOrder } from '@/api/stat';

const { proxy } = getCurrentInstance() as ComponentInternalInstance;
const loading = ref(false);
const dataList = ref();
const showSearch = ref(true);
const queryFormRef = ref<ElFormInstance>();
const dateRange = ref<[DateModelType, DateModelType]>(['', '']);
const queryParams = ref({
  merchantName: '',
  shopName: ''
});


/** 表单重置 */
const reset = () => {
  queryParams.value = {merchantName: '', shopName: ''};
  queryFormRef.value?.resetFields();
}

/** 搜索按钮操作 */
const handleQuery = () => {
  getList();
}

/** 重置按钮操作 */
const resetQuery = () => {
  queryFormRef.value?.resetFields();
  handleQuery();
}

const getList = () => {
  const res = statShopMonthlyOrder(proxy?.addDateRange(queryParams.value, dateRange.value));
  res.then(r => {
    loading.value = false;
    dataList.value = r.data;
  });
}
onMounted(() => {
  loading.value = true;
  getList();
});
</script>
